<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        section{
            width: 500px;
            height: 400px;
            margin: 100px auto;
            display: flex;
            flex-direction: column;
            border: 1px solid #000;
        }
        ul{
            width: 100%;
            height: 300px;
            border: 1px solid #ccc;
            margin-bottom: 10px;
            box-sizing: border-box;
            padding: 10px;
            flex: 1;
        }
        ul li{
            width: 100%;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            margin-top: 5px;
            display: flex;
            justify-content: space-between;
        }
        ul li span{
            color: #ccc;;
        }
        textarea{
            width: 500px;
            height: 30px;
            box-sizing: border-box;
            margin-bottom: 10px;
            font-size: 20px;
        }
        div{
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <section>
        <ul>
            <!-- <li>
                <p>1223</p><span>2020-7-10 10:10:10</span>
            </li>
            <li>
                <p>1223</p><span>2020-7-10 10:10:10</span>
            </li>
            <li>
                <p>1223</p><span>2020-7-10 10:10:10</span>
            </li> -->
        </ul>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <div>
            <button>提交</button><span class='tips'>0/20</span>
        </div>
    </section>

    <script src="./js/utils.js"></script>
    <script>
        
        // 获取输入框、留言板、提示
        let textInput = document.querySelector('textarea');
        let ul = document.querySelector('ul');
        let tips = document.querySelector('.tips');
        
        // 1.点击按钮
        let btn = document.querySelector('button');
        btn.onclick = () =>{
            render();                       // 渲染
            textInput.blur();               // 失焦
            textInput.value = '';           // 清空输入框
            tips.innerHTML = '0/20';        // 提示样式
            tips.style.color = 'black';
        }
    
        // 2.限制长度
        textInput.oninput = () =>{
            
            // 获取文本和长度
            let txt = textInput.value;
            let txtLength = txt.length;
            
            // 超出长度限制样式
            if(txtLength<=20){
                tips.innerHTML = txtLength + '/20';
                tips.style.color = 'black';
            // 正常长度样式
            }else{
                tips.innerHTML = '20/20';
                tips.style.color = 'red';
                textInput.value = txt.slice(0,20);
            }
        }

        // 3.回车提交
        textInput.onkeydown = e =>{
            // 回车键码值为13
            if(e.keyCode === 13){
                // 回车发送信息
                render();
                textInput.blur();               // 失焦
                textInput.value = '';           // 清空输入框
                // 提示样式
                tips.innerHTML = '0/20';        
                tips.style.color = 'black';
            }
        }

            
        // 发送信息封装
        function render(){
            // 获取文本信息和创建发送时间
            let txt = textInput.value;
            let date = new Date();
            let formatting = dates(date);

            // 拼接渲染
            ul.innerHTML += `
            <li>
                <p>${txt}</p><span>${formatting}</span>
            </li>
            `;
        }

        /* 中文混合输入字符存在问题 */
    </script>
</body>
</html>